import React from 'react';
import { Switch, message } from 'antd';
import Api from 'Utils/api';
import EqualBorder from './../../../CommonComponents/EqualBorder';
import './index.scss';

export default class ShiAnMap extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      checked: true,
      videoChecked: true
    };
  }
  componentWillMount() {
    this.initMapStatus();
    this.initVideoStatus();
  }
  initMapStatus() {
    const api = new Api({
      method: 'GET',
      path: '/switch_maps',
      success: (res) => {
        this.setState({
          checked: res.switch_value
        });
      }
    });
    api.run();
  }
  initVideoStatus() {
    const api = new Api({
      method: 'GET',
      path: '/switch_maps/sun_kitchen',
      success: (res) => {
        this.setState({
          videoChecked: res.switch_value
        });
      }
    });
    api.run();
  }
  onChangeSwitch(check) {
    this.setState({
      checked: check
    });
    const api = new Api({
      method: 'PUT',
      path: '/switch_maps',
      success: () => {},
      error: (msg) => { message.error(msg); }
    });
    api.run();
  }
  onChangeVideoSwitch(check) {
    this.setState({
      videoChecked: check
    });
    const api = new Api({
      method: 'PUT',
      path: '/switch_maps/sun_kitchen',
      success: () => {},
      error: (msg) => { message.error(msg); }
    });
    api.run();
  }
  render() {
    const { checked, videoChecked } = this.state;
    return (
      <EqualBorder
        title="食安地图"
        content={
          <div className="co-rule-map">
            <div className="check-box-wrap">
              <div className="label">是否开启食安桥端食安地图</div>
              <div>关<Switch checked={checked} onChange={this.onChangeSwitch.bind(this)} />开</div>
            </div>
            <div className="tip-wrap">
              <div>提示：</div>
              开启食安地图功能则公众可在食安桥端查看食安地图信息
              关闭食安地图功能则公众无法在食安桥端查看食安地图信息
            </div>
            <div className="check-box-wrap">
              <div className="label">是否开启食安桥端阳光厨房</div>
              <div>关<Switch checked={videoChecked} onChange={this.onChangeVideoSwitch.bind(this)} />开</div>
            </div>
            <div className="tip-wrap">
              <div>提示：</div>
              开启阳光厨房功能则公众可在食安桥端查看企业阳光厨房
              关闭阳光厨房功能则公众无法在食安桥端查看企业阳光厨房
            </div>
          </div>
        }
      />
    );
  }
}
